<template>
  <div
    class="head-box"
    :style="{
      height:
        configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_1 ? '140px' : '140px',
    }"
  >
    <div class="logo-box">
      <img :src="logoImg" alt="" />
    </div>
    <div
      v-show="!resetPassWordStatus && configOption.JE_SYS_FASTLOGIN"
      class="switch-way"
      :class="{
        'login-single': configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_1,
        'login-both': configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_2,
      }"
      @click="switchWay"
      @mouseover="showPoptip"
      @mouseout="hidePoptip"
    >
      <i
        ref="iconRef"
        :class="{
          'jeicon jeicon-qrcode account-icon': curentWay == loginWay.LOGIN_WAY_ACCOUNT,
          'fal fa-keyboard fast-icon': curentWay == loginWay.LOGIN_WAY_FAST,
        }"
      ></i>
    </div>
    <div
      class="login-tip"
      :class="{
        'single-tip': configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_1,
        'both-tip': configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_2,
      }"
    >
      <div v-show="showPoptipStatus" class="poptip">
        <div class="poptip-arrow">
          <em></em>
          <span></span>
        </div>
        <div class="poptip-content">{{
          curentWay === loginWay.LOGIN_WAY_ACCOUNT ? fastWay : accountWay
        }}</div>
      </div>
    </div>
    <div
      :class="{
        'cover-trigon-single':
          configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_1,
        'cover-trigon-both': configOption.JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_2,
      }"
    >
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, ref, onMounted } from 'vue';
  import VueEvent from '@/helper/event';
  import { LOGIN_PLAN, LOGIN_WAY, LOGIN_WAY_NAME, EVENT_METHOD } from '@/helper/constant';
  import { useI18n } from '@common/locales';
  import { useGlobalStore } from '@common/store/global-store';
  import { useMicroStore } from '@common/store/micro-store';
  import { getLoginImg, getOriginalPicture } from '@/helper/publish';
  import { decode } from '@jecloud/utils';
  export default defineComponent({
    name: 'LoginHead',
    setup() {
      const globalStore = useGlobalStore();
      const microStore = useMicroStore();
      const t = useI18n().t;
      let configOption = ref({ JE_SYS_LOGINMETHOD: LOGIN_PLAN.MARK_LOGIN_LOGINMETHOD_1 });
      let curentWay = ref(LOGIN_WAY.LOGIN_WAY_ACCOUNT);
      let showPoptipStatus = ref(false); //显示登录方式tip
      let resetPassWordStatus = ref(false); //是否为重置密码状态
      let iconRef = ref(null); //登录方式元素
      // let logoImg = ref(getLoginImg('titleLogo')); //登录logo
      let logoImg = ref(''); //登录logo
      const state = {
        loginPlan: LOGIN_PLAN,
        loginWay: LOGIN_WAY,
        loginWayName: LOGIN_WAY_NAME,
        eventMethod: EVENT_METHOD,
        accountWay: t('accountLogin.imgTip'),
        fastWay: t('fastLogin.imgTip'),
      };
      const methods = {
        triggerConfig(data) {
          //监听登录页面配置信息
          configOption.value = { ...data };
          const logoImgObj = decode(data.JE_SYS_TITLELOGO);
          if (logoImgObj) {
            if (Array.isArray(logoImgObj)) {
              logoImg.value = getOriginalPicture(globalStore.activePlan, logoImgObj[0].fileKey);
            } else {
              logoImg.value = getOriginalPicture(globalStore.activePlan, logoImgObj.fileKey);
            }
          }
        },
        switchWay() {
          curentWay.value =
            curentWay.value === state.loginWay.LOGIN_WAY_ACCOUNT
              ? state.loginWay.LOGIN_WAY_FAST
              : state.loginWay.LOGIN_WAY_ACCOUNT;
          VueEvent.emit(state.eventMethod.LOGIN_WAY, curentWay.value);
        },
        showPoptip() {
          showPoptipStatus.value = true;
        },
        hidePoptip() {
          showPoptipStatus.value = false;
        },
        resetPassword() {
          //重置密码
          resetPassWordStatus.value = !resetPassWordStatus.value;
        },
        initLoginImg() {
          const loginConfig = globalStore.plans.get(globalStore.activePlan) || {};
          const logoImgObj = decode(loginConfig.JE_SYS_TITLELOGO);
          if (logoImgObj) {
            if (Array.isArray(logoImgObj)) {
              logoImg.value = getOriginalPicture(globalStore.activePlan, logoImgObj[0].fileKey);
            } else {
              logoImg.value = getOriginalPicture(globalStore.activePlan, logoImgObj.fileKey);
            }
          }
        },
      };
      // 注册主应用监听事件
      microStore.on('admin-plan-change', (config) => {
        // logoImg.value = getLoginImg('titleLogo');
        methods.initLoginImg();
      });
      onMounted(() => {
        //监听事件
        methods.initLoginImg();
        VueEvent.on(state.eventMethod.LOGIN_METHOD, methods.triggerConfig);
        VueEvent.on(state.eventMethod.FORGET_PASSWORD, methods.resetPassword);
      });

      return {
        configOption,
        showPoptipStatus,
        resetPassWordStatus,
        iconRef,
        logoImg,
        ...toRefs(state),
        ...methods,
        curentWay,
      };
    },
  });
</script>
<style scoped lang="less">
  .head-box {
    width: 100%;
    height: 140px;
    box-sizing: border-box;
    position: relative;
    .logo-box {
      width: 360px;
      height: 80px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
      }
    }
    .login-tip {
      position: absolute;
      top: 14px;
      right: 70px;
      .poptip {
        line-height: 16px;
        position: relative;
        z-index: 9999;
        background-color: #2d3b41;
        border: 1px solid #2d3b41;
        padding: 5px 3px;
        border-radius: 2px;
        .poptip-arrow {
          position: absolute;
          z-index: 10;
          top: 8px;
          right: 0;
          em {
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: hsla(0, 0%, 100%, 0);
            overflow: hidden;
            top: 0;
            left: 1px;
            border-left-color: #2d3b41;
            border-width: 3px 0 3px 3px;
          }
          span {
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: hsla(0, 0%, 100%, 0);
            overflow: hidden;
            top: 0;
            left: 0;
            border-left-color: #2d3b41;
            border-width: 3px 0 3px 3px;
          }
        }
        .poptip-content {
          color: #fff;
          font-size: 12px;
          line-height: 12px;
        }
      }
    }
    .single-tip {
      top: 14px;
      right: 70px;
    }
    .both-tip {
      top: 20px;
      right: 100px;
    }

    .login-single {
      width: 45px;
      height: 45px;
      position: absolute;
      top: 0px;
      right: 0px;
      i {
        position: absolute;
        right: 3px;
        font-size: 45px;
        opacity: 0.8;
        color: #d9d9d9;
        cursor: pointer;
      }
      .account-icon {
        top: -7px;
      }
      .fast-icon {
        top: 0;
      }
    }

    .login-both {
      width: 45px;
      height: 45px;
      position: absolute;
      top: 0px;
      right: 0px;
      i {
        font-size: 45px;
        position: absolute;
        right: 3px;
        opacity: 0.8;
        color: #d9d9d9;
        cursor: pointer;
      }
      .account-icon {
        top: -7px;
      }
      .fast-icon {
        top: 0;
      }
    }
    .switch-way {
      z-index: 10;
    }
    .switch-way:hover {
      cursor: pointer;
    }
    .cover-trigon-single {
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      border: 33px solid transparent;
      border-right-color: #fff;
      position: absolute;
      z-index: 10;
      top: 21px;
      right: 21px;
      transform-origin: center;
      transform: rotate(-45deg);
    }
    .cover-trigon-both {
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      border: 33px solid transparent;
      border-right-color: #fff;
      position: absolute;
      z-index: 10;
      top: 21px;
      right: 21px;
      transform-origin: center;
      transform: rotate(-45deg);
    }
  }
</style>
